<template>
  <div class="base">
    <p class="basic">基本信息</p>
    <div class="staff">
      <div class="left">
        <div class="imgbox">
          <img :src="ruleForm.avatarAddress" v-if="ruleForm.avatarAddress" />
        </div>
        <el-upload
          class="avatar-uploader"
          action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
          :headers="{ uploadScene: 'avatar' }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <div class="change">更换员工头像</div>
        </el-upload>
      </div>
      <div class="middle">
        <el-form
          label-width="100px"
          :model="ruleForm"
          ref="ruleForm"
          :rules="rules"
        >
          <div class="one">
            <el-form-item label="员工姓名：" class="name" prop="realName">
              <el-input
                v-model="ruleForm.realName"
                size="small"
                placeholder="请输入员工姓名"
                maxlength="15"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item
              label="员工编号："
              class="staffCode"
              v-if="!this.isNewAdd"
            >
              <el-input v-model="ruleForm.staffCode" size="small" disabled>
              </el-input>
              <el-button
                style="background-color:#fd804c;color: #fff;"
                @click="copy(ruleForm.staffCode)"
                class="copy tag"
                >复制ID</el-button
              >
            </el-form-item>
          </div>
          <el-form-item label="手机号码：" class="phone" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              size="small"
              placeholder="请输入员工手机号码"
              maxlength="11"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="入职时间：" class="date" prop="entryTime">
            <el-date-picker
              v-model="ruleForm.entryTime"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="员工归属：" class="area">
            <span style="margin:0 5px;">城市</span>
            <el-select
              placeholder="请选择"
              size="small"
              v-model="ruleForm.cityCode"
              @change="changeCity"
            >
              <el-option
                v-for="(item, index) in cityAndBusinessOptions"
                :key="index"
                :label="item.cityName"
                :value="item.cityCode"
              ></el-option>
            </el-select>
            <span style="margin:0 5px;">商圈</span>
            <el-select
              v-model="ruleForm.selectBusinessAreaCode"
              placeholder="请选择"
              size="small"
              @visible-change="changeBusiness"
              @change="changeBusinessAndPushList"
            >
              <el-option
                v-for="(item, index) in activeBusinessOptions"
                :key="index"
                :label="item.businessAreaName"
                :value="item.businessAreaCode"
              ></el-option>
            </el-select>
            <el-button
              style="padding:8px 10px;margin-left:15px;"
              @click="showAllSelectBusiness = true"
              :disabled="ruleForm.businessAreaCode.length == 0"
              >查看选择商圈</el-button
            >
            <!-- <el-checkbox
              :value="ruleForm.isCrossBusinessArea == 1"
              style="margin-left: 2%"
              @change="changeCrossBusinessArea"
              >支持跨商圈服务</el-checkbox
            > -->
          </el-form-item>
          <el-form-item size="small" label="员工等级：">
            <el-select
              v-model="ruleForm.level"
              placeholder="请选择"
              style="width: 80px"
            >
              <el-option
                v-for="(item, index) in levelOptions"
                :key="index"
                :label="`${item}级`"
                :value="item"
              ></el-option>
            </el-select>
            <el-button size="small" v-if="false"
              >好评率:{{ ruleForm.praiseRate }}%</el-button
            >
            <el-button size="small" v-if="!this.isNewAdd"
              >工龄:{{ ruleForm.workYears }}年</el-button
            >
            <el-button
              size="small"
              v-if="!this.isNewAdd"
              @click="goToWorkOrders(ruleForm.staffCode)"
              >查看所有工单</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      title="选中的商圈"
      :visible.sync="showAllSelectBusiness"
      :show-close="false"
      :close-on-click-modal="false"
      width="30%"
    >
      <div>
        <el-tag
          v-for="tag in businessAreaNameAndCode"
          :key="tag.businessAreaCode"
          closable
          type="success"
          @close="deleteTag(tag.businessAreaCode)"
        >
          {{ tag.businessAreaName }}
        </el-tag>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="dialogOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import Clipboard from "clipboard";
export default {
  props: {
    staffBasicVo1: {
      required: false
    }
  },
  data() {
    return {
      showAllSelectBusiness: false,
      ruleForm: {
        avatarAddress: "",
        realName: "",
        staffCode: "",
        phone: "",
        entryTime: "", // 入职时间
        cityCode: "",
        selectBusinessAreaCode: "", // 当前选择的商圈
        businessAreaCode: [], // 多选的商圈列表
        level: "",
        isCrossBusinessArea: 0,
        praiseRate: "0", // 好评率
        workYears: "0" // 工龄
      },
      businessAreaName: [], // 多选商圈中文名称
      businessAreaNameAndCode: [], // 多选商圈的中文和code
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },

      cityAndBusinessOptions: [],
      businessOptions: [],
      activeBusinessOptions: [], // 去除用户选中之后的商圈枚举
      levelOptions: [],
      isNewAdd: "",
      rules: {
        realName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入员工手机号", trigger: "blur" }
        ],
        entryTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    // changeSelect(val) {
    //   console.log("val,,,,,,,,,", val);
    // },

    async fetchCityAndBusiness() {
      const data = await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchCityAndBusiness",
        methods: "get"
      });
      if (data) {
        this.cityAndBusinessOptions = data;
      }
    },
    changeCity() {
      this.ruleForm.businessAreaCode = [];
    },
    changeBusiness(value) {
      // 商圈下拉框下拉时触发 选择商圈枚举
      if (value) {
        if (!this.ruleForm.cityCode) {
          this.$message.error("请先选择城市");
          return false;
        }
        const obj = this.cityAndBusinessOptions.find(
          item => item.cityCode === this.ruleForm.cityCode
        );
        this.businessOptions = obj.businessCityInfo;
        if (this.businessAreaNameAndCode.length == 0) {
          this.activeBusinessOptions = obj.businessCityInfo;
        }
      }
    },
    changeBusinessAndPushList(value) {
      // console.log(value)
      if (value) {
        if (this.ruleForm.businessAreaCode.indexOf(value) == -1) {
          this.ruleForm.businessAreaCode.push(value);
        }
        this.ruleForm.selectBusinessAreaCode = "";
      }
    },
    async fetchLevel() {
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchLevel",
        method: "get"
      }).then(res => {
        this.levelOptions = res;
      });
    },
    changeCrossBusinessArea(value) {
      if (value) {
        this.ruleForm.isCrossBusinessArea = 1;
      } else {
        this.ruleForm.isCrossBusinessArea = 0;
      }
    },
    handleAvatarSuccess({ data }) {
      this.ruleForm.avatarAddress = data;
    },
    copy(data) {
      // 员工编号复制
      let clipboard = new Clipboard(".tag", {
        text: function() {
          return data;
        }
      });
      clipboard.on("success", e => {
        this.$message({
          message: "复制成功",
          showClose: true,
          type: "success"
        });
        // 释放内存
        clipboard.destroy();
      });
    },
    initData() {
      // 编辑页面回显数据
      this.ruleForm.avatarAddress = this.staffBasicVo1.avatarAddress;
      this.ruleForm.realName = this.staffBasicVo1.realName;
      this.ruleForm.staffCode = this.$route.query.staffCode;
      this.ruleForm.phone = this.staffBasicVo1.phone;
      this.ruleForm.entryTime = new Date(this.staffBasicVo1.entryTime);
      this.ruleForm.cityCode = this.staffBasicVo1.cityCode;
      this.ruleForm.businessAreaCode = this.staffBasicVo1.businessAreaCode;
      this.ruleForm.level = this.staffBasicVo1.level;
      this.ruleForm.isCrossBusinessArea = this.staffBasicVo1.isCrossBusinessArea;
      this.ruleForm.praiseRate = this.staffBasicVo1.praiseRate;
      this.ruleForm.workYears = this.staffBasicVo1.workYears;
      // 重置此时商圈枚举
      this.businessOptions = this.cityAndBusinessOptions.find(
        item => item.cityCode === this.ruleForm.cityCode
      ).businessCityInfo;
      this.activeBusinessOptions = this.cityAndBusinessOptions.find(
        item => item.cityCode === this.ruleForm.cityCode
      ).businessCityInfo;
    },
    goToWorkOrders(staffCode) {
      this.$router.push({
        path: "/workorderlist",
        query: {
          staffCode: staffCode
        }
      });
    },
    dialogOk() {
      this.showAllSelectBusiness = false;
    },
    deleteTag(businessAreaCode) {
      const findIndex = this.ruleForm.businessAreaCode.findIndex(
        item => item === businessAreaCode
      );
      this.ruleForm.businessAreaCode.splice(findIndex, 1);
    }
  },
  mounted() {
    if (this.$route.query.staffCode) {
      this.isNewAdd = false;
    } else {
      this.isNewAdd = true;
    }
    this.fetchCityAndBusiness();
    this.fetchLevel();
  },
  watch: {
    ruleForm: {
      handler() {
        // 特殊需求 传递businessAreaName商圈名称
        if (this.ruleForm.businessAreaCode.length > 0) {
          this.businessAreaNameAndCode = this.ruleForm.businessAreaCode.map(
            item1 => {
              const obj = this.businessOptions.find(
                item2 => item2.businessAreaCode == item1
              );
              if (obj && obj.businessAreaName) {
                return obj;
              }
            }
          );
          this.businessAreaName = this.businessAreaNameAndCode.map(
            item => item.businessAreaName
          );
        }
        if (this.ruleForm.businessAreaCode.length == 0) {
          this.businessAreaName = [];
          this.businessAreaNameAndCode = [];
        }
        // const obj = this.businessOptions.find(
        //   item => item.businessAreaCode === this.ruleForm.businessAreaCode
        // );
        // if (obj && obj.businessAreaName) {
        //   const businessAreaName = obj.businessAreaName;
        //   this.ruleForm.businessAreaName = businessAreaName;
        // }
        this.$emit("save", {
          avatarAddress: this.ruleForm.avatarAddress,
          businessAreaCode: this.ruleForm.businessAreaCode,
          businessAreaName: this.businessAreaName.join(","),
          cityCode: this.ruleForm.cityCode,
          isCrossBusinessArea: this.ruleForm.isCrossBusinessArea,
          entryTime: this.ruleForm.entryTime
            ? moment(this.ruleForm.entryTime).format("YYYY-MM-DD")
            : "",
          level: this.ruleForm.level,
          phone: this.ruleForm.phone,
          praiseRate: "0",
          realName: this.ruleForm.realName,
          workYears: 0
        });
      },
      deep: true
    },
    businessAreaNameAndCode: {
      handler(newvalue) {
        if (this.businessOptions.length > 0) {
          const copybusinessOptions = JSON.parse(
            JSON.stringify(this.businessOptions)
          );
          if (newvalue.length > 0) {
            newvalue.forEach(item => {
              const index = copybusinessOptions.findIndex(
                item1 => item.businessAreaCode == item1.businessAreaCode
              );
              copybusinessOptions.splice(index, 1);
            });
            this.activeBusinessOptions = copybusinessOptions;
          }
        }
      },
      deep: true
    },
    // businessOptions: {
    //   handler(newvalue) {
    //     this.activeBusinessOptions = newvalue
    //   }
    // },
    staffBasicVo1(newvalue) {
      if (newvalue && this.$route.query.staffCode) {
        // 编辑回显数据
        this.initData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.base .staff .middle[data-v-52b448d4] .el-form .area .el-select {
  width: 180px;
}
/deep/ .el-dialog__header {
  padding-top: 10px;
}
/deep/ .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}
/deep/ .el-dialog__footer {
  padding-bottom: 10px;
}
/deep/ .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
.base {
  background-color: #fff;
  .basic {
    font-size: 18px;
    font-weight: 900;
    padding-top: 2%;
    margin-left: 1%;
  }
  .staff {
    width: 100%;
    height: auto;
    display: flex;
    box-sizing: border-box;
    padding: 0 20px;
    padding-bottom: 20px;
    border-bottom: 10px solid #ebeef1;
    margin-top: 2%;
    /deep/ .el-form-item__label {
      color: #000;
    }
    .left {
      width: 200px;
      margin-right: 20px;
      .imgbox {
        width: 178px;
        height: 178px;
        border: 10px solid #cccccc;
        border-radius: 5px;
        margin-bottom: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /deep/ .el-upload {
        width: 100%;
        .change {
          width: 196px;
          height: 30px;
          border: 1px solid #dfdfdf;
          border-radius: 5px;
          font-size: 12px;
          text-align: center;
          line-height: 30px;
        }
      }
    }
    .middle {
      flex: 1;
      /deep/ .el-form {
        .el-form-item {
          padding-bottom: 13px;
          margin-bottom: 0;
        }
        .one {
          display: flex;
          align-items: center;
          .name {
            .el-form-item__content {
              width: 300px;
            }
          }
          .staffCode {
            margin-left: 20px;
            .el-form-item__content {
              display: flex;
              align-items: center;
              width: 260px;
              .copy {
                margin-left: 10px;
                height: 32px;
                display: flex;
                align-items: center;
              }
            }
          }
        }
        .phone {
          .el-form-item__content {
            width: 300px;
          }
        }
        .area {
          .el-select {
            width: 150px;
          }
        }
        .date {
          .el-form-item__content {
            height: 30px;
            width: 300px;
            .el-date-editor {
              height: 30px;
              width: 300px;
              .el-input__inner {
                height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
